<template>
	<view class="">
 			<view class="bar_top"> 
				
				<view class="search_bar">
					<picker mode="selector" v-if="statisType == 1" :range="classList" :value="classIndex" range-key="name" @change="choiseClass">
						<view class="search_bar_picker">
							<view>{{classList[classIndex].name}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>

					<picker mode="selector" v-if="statisType == 5" :range="yearList" :value="yearIndex" @change="choiseYear">
                        <view class="search_bar_picker">
                            <view>{{yearList[yearIndex]}}</view>
                            <image src="/static/images/bar_down.png"></image>
                        </view>
					</picker>
					
					<view class="search_bar_btn">
						<image :src="type == 1 ? '/static/images/unpie.png' : '/static/images/pie.png'" @tap="selChartType(0)"></image>
						<image :src="type == 0 ? '/static/images/unbar.png' : '/static/images/bar.png'" @tap="selChartType(1)"></image>
					</view>
				</view>
				
				<view class="statistics_box">
					<canvas canvas-id="chart" id="chart" class="charts" @touchstart="touchChart"></canvas>
				</view>
			</view>
  	</view>
</template>

<script>
	import uCharts from "../../../js_sdk/u-charts/u-charts/u-charts.js";
	let chart = null;
	export default{
		data(){
			return{
				statisType:1, // 1.客户分类  2.客户新增  3.客户拜访  4.销售排行   5.销售走势   7.派工总览  8.其他报表
				type:0,
				classList:[
					{"name": "类别","data": 1},
					{"name": "省","data": 2},
					{"name": "市","data": 3},
					{"name": "商户类型","data": 4},
					{"name": "区域","data": 5},
				], 
				classIndex:0,
				yearList:[2001,2002,2003,2004,2005,2006,2007,2008,2009,
                2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,
                2020,2021,2022,2023,2024,2025],
                yearIndex:19,
				branch_id:0,   // 部门ID
				cWidth:"",
				cHeight:"",
				series1: [],
				categories: [],
				series2:[
					{"name":"","data": []}
				],
				colorList:["#8cc540","#009f5d","#019fa0","#019fde","#007cdc","#887ddd","#cd7bdd","#ff5675","#ff1244","#ff8345","#f8bd0b","#d1d2d4"]
			}
		},
		onLoad(options) {
			this.cWidth=uni.upx2px(670);
			this.cHeight=uni.upx2px(500);

			this.statisType = options.statisType;

			this.getChatData();

		},
		methods:{
			// 设置标题
			setNavTitle(title) {
				uni.setNavigationBarTitle({
					title
				})
			},
			selChartType(type){
				if(type != this.type){
					this.type = type;
					this.drawChart();
				}
			},
			// 获取数据
			getChatData(){
				
				let upJson = {user_id:uni.getStorageSync("userId")};
				let reqType = 0;

				if(this.statisType ==1 ){ //客户分类
					upJson.class = this.classList[this.classIndex].data;
					reqType = 0;

					this.setNavTitle("客户分类统计");
				} else if(this.statisType ==5 ){ // 销售走势
 
					upJson.year = this.yearList[this.yearIndex];
					reqType = 4;

					this.setNavTitle("销售走势统计");
				}else if(this.statisType ==7 ){ // 派工总览

					upJson = {};
					reqType = 6;
					this.setNavTitle("派工总览统计");

				}else if(this.statisType ==8 ){ // 派工总览

					upJson = {};
					reqType = 5;
					this.setNavTitle("其他统计");
				}
		
				// 清空数据
				this.series1 = new Array();
				this.categories = new Array();
				this.series2[0].data = new Array();

				this.$api.getChatList(upJson,reqType).then(res =>{
					if(this.statisType == 8){
						 
						 let data = res.data;

						// 封装数据格式
						for(let i in data) {  
							this.series1.push({name:data[i].title,data:data[i].number,color:this.colorList[i]});

							this.categories.push(data[i].title);
							let obj = {"value":data[i].number,"color":this.colorList[i]};
							this.series2[0].data.push(obj);
						}

					}else{
						if(this.statisType == 1){
							this.series1 = res.series;
						}else{
							this.series1 = res;
						}

						// 封装柱形图标数据
						for(let i in this.series1){

							this.series1[i].color = this.colorList[i];
							this.categories.push(this.series1[i].name);
							let obj = {"value":this.series1[i].data,"color":this.colorList[i]};
							this.series2[0].data.push(obj);
						}

						console.log("参数----。》》》》》",this.categories);
					}
					this.drawChart();

				})

 			},
			choiseClass(e){
				this.classIndex = e.detail.value;

				this.getChatData();
			},
			choiseYear(e){
                this.yearIndex = e.detail.value;
                this.getChatData();
			},
			drawChart(){
				let that = this;
				if(this.type == 0){
					chart = new uCharts({
						$this:this,
						canvasId: 'chart',
						type: 'pie',
						fontSize:11,
						legend:{show:true},
						background:'#FFFFFF',
						pixelRatio:1,
						series: this.series1,
						animation: true,
						width: this.cWidth,
						height: this.cHeight,
						dataLabel: true,
						extra: {
							pie: {
							  labelWidth:15
							}
						},
					});
				}else{
					chart = new uCharts({
						$this:this,
						canvasId: 'chart',
						type: 'column',
						legend:{show:false},
						fontSize:11,
						background:'#FFFFFF',
						pixelRatio:1,
						padding:[40,15,4,15],
						animation: true,
						categories: this.categories,
						series: this.series2,
						xAxis: {
							disableGrid:true,
							rotateLabel:true
						},
						yAxis: {
							//disabled:true
						},
						dataLabel: true,
						width: this.cWidth,
						height: this.cHeight,
						extra: {
							column: {
								type:'group',
								width: 20
							}
						  }
					});
				}
			},
			touchChart(e){
				chart.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data 
					}
				});
			}, 
		}
	}
</script>

<style>
	.search_bar{justify-content: flex-start;}
	.search_bar_picker{margin-right: 50upx;}
</style>
